import { ProForm, ProFormInstance, ProFormItem } from '@/components/Pro';
import { useIntl } from '@umijs/max';
import { Col, Input, Row, Space } from 'antd';
import React, { useEffect, useRef } from 'react';

type IProps = {
  cellInfo: API.BatteryCellInfoDTO | undefined;
};
const CellParams: React.FC<IProps> = (props) => {
  const { cellInfo } = props;
  const intl = useIntl();
  const formRef = useRef<ProFormInstance>(null);
  useEffect(() => {
    formRef?.current?.setFieldsValue(cellInfo);
  }, [cellInfo]);
  return (
    <>
      <ProForm
        formRef={formRef}
        layout={'horizontal'}
        disabled={true}
        colon={false}
        submitter={false}
        labelCol={{
          span: 8,
        }}
      >
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.cellBrand' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'brand'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.cellCertification' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'cert'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.nominalCapacity' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'cap'}
            >
              <Input suffix={<span>Ah</span>}></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.nominalChargeCurrent' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'chargeCur'}
            >
              <Input suffix={<span>A</span>}></Input>
            </ProFormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.maxChargeCurrent' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'chargeCurMaX'}
            >
              <Input suffix={<span>A</span>}></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.nominalDischargeCurrent' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'dischargeCur'}
            >
              <Input suffix={<span>A</span>}></Input>
            </ProFormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.maxDischargeCurrent' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'dischargeCurMax'}
            >
              <Input suffix={<span>A</span>}></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.energyEfficiency' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'energyEffi'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.dimensions' })}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Space>
                <Input suffix={'mm'} value={cellInfo?.length}></Input>
                <span>*</span>
                <Input suffix={'mm'} value={cellInfo?.height}></Input>
                <span>*</span>
                <Input suffix={'mm'} value={cellInfo?.width}></Input>
              </Space>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.storageTemperatureRange' })}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Space>
                <Input suffix={'℃'} value={cellInfo?.storageTmpMin}></Input>
                <span>-</span>
                <Input suffix={'℃'} value={cellInfo?.storageTmpMax}></Input>
              </Space>
            </ProFormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={24}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.operatingTemperatureRange' })}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Space>
                <span>{intl.formatMessage({ id: 'device.chargingStatus' })}</span>
                <Input suffix={'℃'} value={cellInfo?.chargeTmpMin}></Input>
                <span>-</span>
                <Input suffix={'℃'} value={cellInfo?.chargeTmpMax}></Input>
                <span>{intl.formatMessage({ id: 'device.dischargingStatus' })}</span>
                <Input suffix={'℃'} value={cellInfo?.dischargeTmpMin}></Input>
                <span>-</span>
                <Input suffix={'℃'} value={cellInfo?.dischargeTmpMax}></Input>
              </Space>
            </ProFormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.humidity' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'humidity'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
        </Row>
      </ProForm>
    </>
  );
};
export default CellParams;
